<template>
  <div class="post-list-static">
    <div class="post-card-static" v-for="post in posts" :key="post.id">
      <div class="post-card-left">
        <div class="post-user">
          <img :src="post.author.avatar" class="avatar" />
          <span class="nickname">{{ post.author.name }}</span>
          <span v-if="post.author.verified" class="verified" title="已认证">✔️</span>
          <span class="dot">·</span>
          <span class="time">{{ post.createTime }}</span>
        </div>
        <div class="post-title">{{ post.title }}</div>
        <div class="post-content">{{ post.content }}</div>
        <div class="post-tags">
          <span v-for="tag in post.topics" :key="tag" class="tag">#{{ tag }}</span>
        </div>
        <div class="post-actions">
          <span class="action like"><i class="iconfont icon-like"></i> {{ post.likes }}</span>
          <span class="action comment"
            ><i class="iconfont icon-comment"></i> {{ post.comments }}</span
          >
          <span class="action share"><i class="iconfont icon-share"></i> 分享</span>
          <span class="action view"><i class="iconfont icon-view"></i> {{ post.views }}</span>
        </div>
        <div class="post-comments">
          <div class="comment" v-for="c in post.commentsList" :key="c.id">
            <img :src="c.avatar" class="comment-avatar" />
            <span class="comment-user">{{ c.user }}：</span>{{ c.text }}
          </div>
          <div class="more-comments">查看更多评论</div>
        </div>
      </div>
      <div class="post-card-right">
        <div v-if="post.images.length > 1" class="img-carousel">
          <img
            v-for="(img, idx) in post.images"
            :key="idx"
            :src="img"
            class="main-img"
            :class="{ active: idx === 0 }"
          />
          <div class="img-indicators">
            <span
              v-for="(img, idx) in post.images"
              :key="idx"
              :class="{ active: idx === 0 }"
            ></span>
          </div>
        </div>
        <img v-else :src="post.images[0]" class="main-img" />
      </div>
    </div>
  </div>
</template>

<script setup>
  const posts = [
    {
      id: 1,
      title: '春天的花海',
      content: '春天来了，百花盛开，快来欣赏美丽的花海吧！',
      images: [
        'https://images.unsplash.com/photo-1506744038136-46273834b3fb',
        'https://images.unsplash.com/photo-1465101046530-73398c7f28ca',
      ],
      topics: ['春天', '花', '自然'],
      author: { name: '小花', avatar: 'https://i.pravatar.cc/40?img=5', verified: true },
      likes: 123,
      comments: 45,
      views: 1024,
      createTime: '1小时前',
      commentsList: [
        { id: 1, user: '小明', avatar: 'https://i.pravatar.cc/40?img=1', text: '好美的图片！' },
        { id: 2, user: '小红', avatar: 'https://i.pravatar.cc/40?img=2', text: '支持一下！' },
      ],
    },
    {
      id: 2,
      title: '城市夜景',
      content: '夜晚的城市灯火通明，别有一番风味。',
      images: ['https://images.unsplash.com/photo-1465101178521-c1a9136a3b99'],
      topics: ['城市', '夜景'],
      author: { name: '夜行者', avatar: 'https://i.pravatar.cc/40?img=8', verified: false },
      likes: 88,
      comments: 12,
      views: 888,
      createTime: '2小时前',
      commentsList: [
        { id: 1, user: '小明', avatar: 'https://i.pravatar.cc/40?img=1', text: '夜景真美！' },
        { id: 2, user: '小红', avatar: 'https://i.pravatar.cc/40?img=2', text: '氛围感拉满' },
      ],
    },
    {
      id: 3,
      title: '可爱的小猫',
      content: '家里的小猫又在卖萌了，快来看！',
      images: ['https://images.unsplash.com/photo-1518717758536-85ae29035b6d'],
      topics: ['宠物', '猫咪'],
      author: { name: '猫奴', avatar: 'https://i.pravatar.cc/40?img=12', verified: true },
      likes: 156,
      comments: 30,
      views: 1200,
      createTime: '3小时前',
      commentsList: [
        { id: 1, user: '小明', avatar: 'https://i.pravatar.cc/40?img=1', text: '太可爱了！' },
        { id: 2, user: '小红', avatar: 'https://i.pravatar.cc/40?img=2', text: '想rua！' },
      ],
    },
  ]
</script>

<style scoped>
  .post-list-static {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .post-card-static {
    display: flex;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition:
      box-shadow 0.2s,
      transform 0.2s;
    min-height: 180px;
    cursor: pointer;
    position: relative;
  }
  .post-card-static:hover {
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.16);
    transform: translateY(-4px) scale(1.02);
  }
  .post-card-left {
    flex: 1 1 0;
    padding: 24px 24px 18px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .post-user {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: #888;
    margin-bottom: 8px;
  }
  .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 4px;
    border: 2px solid #e6f0ff;
  }
  .verified {
    color: #4caf50;
    font-size: 15px;
    margin-left: 2px;
  }
  .nickname {
    font-weight: 500;
    color: #222;
  }
  .dot {
    font-size: 18px;
    color: #bbb;
    margin: 0 4px;
  }
  .time {
    font-size: 13px;
    color: #bbb;
  }
  .post-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 6px;
    color: #222;
  }
  .post-content {
    font-size: 15px;
    color: #444;
    margin-bottom: 8px;
    min-height: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .post-tags {
    margin-bottom: 8px;
  }
  .tag {
    display: inline-block;
    background: #f5f6fa;
    color: #409eff;
    border-radius: 12px;
    padding: 2px 12px;
    font-size: 13px;
    margin-right: 8px;
    margin-bottom: 2px;
    transition:
      background 0.2s,
      color 0.2s;
    cursor: pointer;
  }
  .tag:hover {
    background: #409eff;
    color: #fff;
  }
  .post-actions {
    display: flex;
    gap: 18px;
    margin-bottom: 8px;
  }
  .action {
    color: #888;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition:
      color 0.2s,
      transform 0.2s;
    cursor: pointer;
  }
  .action:hover {
    color: #409eff;
    transform: scale(1.1);
  }
  .iconfont {
    font-size: 17px;
  }
  .like:hover {
    color: #f56c6c;
  }
  .comment:hover {
    color: #409eff;
  }
  .share:hover {
    color: #ff9800;
  }
  .view {
    color: #bbb;
    font-size: 14px;
  }
  .post-comments {
    font-size: 14px;
    color: #666;
    margin-top: 2px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .comment {
    display: flex;
    align-items: center;
    margin-bottom: 2px;
  }
  .comment-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    margin-right: 5px;
  }
  .comment-user {
    color: #409eff;
    font-weight: 500;
    margin-right: 2px;
  }
  .more-comments {
    color: #bbb;
    font-size: 13px;
    margin-top: 2px;
    cursor: pointer;
  }
  .post-card-right {
    flex: 0 0 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f8fa;
    position: relative;
  }
  .main-img {
    width: 160px;
    height: 120px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin: 0 2px;
    transition: transform 0.2s;
  }
  .img-carousel {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }
  .img-carousel .main-img {
    margin-bottom: 8px;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  .img-indicators {
    display: flex;
    gap: 4px;
    justify-content: center;
  }
  .img-indicators span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e0e0e0;
    transition: background 0.2s;
  }
  .img-indicators span.active {
    background: #409eff;
  }
</style>
